<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>适用门店</title>
    <link rel="stylesheet" href="__STATIC_URL__/static/mobile/css/weui.css" />
</head>
<style type="text/css">
    body {
        background: #F8F8F8;
    }
    .weui-navbar__item{
        position: relative;
        padding:6px 0;
    }
    .weui-navbar__item img{
        position:absolute;
        right: 10%;
        top: 12px;
        width: 12px;
        height: 12px;
    }
    .weui-navbar__item span{
        text-align: center;
        display: block;
        width: 100%;
    }
    #selProvince,#selCity,#selDistrict{
        border: none;
        outline: none;
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 3em;
        opacity: 0;
    }
    .weui-media-box{
        padding: 10px 15px;
    }
    .weui-media-box_appmsg .weui-media-box__hd{
        width: 50px;
        height: 50px;
    }
    .weui-media-box__title{
        font-size: 16px;
    }
    .weui-media-box__desc{
        margin-top:2px ;
    }
</style>
<body>
<div class="container" id="container">
    <div class="page navbar js_show">
        <div class="page__bd">
            <div class="weui-tab">
                <div class="weui-navbar" style="background: #fff;">
                    <div class="weui-navbar__item">
                        <span class="selProvince">选择省份</span>
                        <select id="selProvince">
                            <option value="0">选择省份</option>
                        </select>
                        <img src="__STATIC_URL__/static/mobile/images/xia.png" alt="" />
                    </div>
                    <div class="weui-navbar__item">
                        <span class="selCity">选择城市</span>
                        <select id="selCity">
                            <option value="0">选择城市</option>
                        </select>
                        <img src="__STATIC_URL__/static/mobile/images/xia.png" alt="" />
                    </div>
                    <div class="weui-navbar__item">
                        <span class="selDistrict">选择地区</span>
                        <select id="selDistrict">
                            <option value="0">选择地区</option>
                        </select>
                        <img src="__STATIC_URL__/static/mobile/images/xia.png" alt="" />
                    </div>
                </div>
                <div class="weui-tab__panel">

                </div>
            </div>
            <div class="weui-panel weui-panel_access" style="margin-top:0;">
                <div class="weui-panel__bd">
                  {volist name="list" id="vo"}
                    <a href="{:url('carduser/storeinfo', array('id'=>$vo['id']))}" class="weui-media-box weui-media-box_appmsg">
                        <div class="weui-media-box__hd">
                            <img class="weui-media-box__thumb" src="{$vo.img}" style="width: 100%;height: 100%;" alt="">
                        </div>
                        <div class="weui-media-box__bd">
                            <h4 class="weui-media-box__title">{$vo.merchant}</h4>
                            <p class="weui-media-box__desc">地址:{$vo.address}</p>
                        </div>
                    </a>
                  {/volist}

                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="__STATIC_URL__/static/jquery/3.2.1/jquery.min.js"></script>
<script src="__STATIC_URL__/static/mobile/js/china_area.js"></script>
<script type="text/javascript" >
    $(function() {
        $.each(provinceJson, function(k, p) {
            var option = "<option value='" + p.id + "'>" + p.province + "</option>";
            $("#selProvince").append(option);
        });
        $("#selProvince").change(function() {
            var selValue = $(this).val();
            $("#selCity option:gt(0)").remove();
            var selProvince = $("#selProvince option:selected").text();
            $(".selProvince").text(selProvince);
            $(".selCity").text("选择城市");
            $.each(cityJson, function(k, p) {
                // 直辖市处理.|| p.parent == selValue，直辖市为当前自己
                if (p.id == selValue || p.parent == selValue) {
                    var option = "<option value='" + p.id + "'>" + p.city + "</option>";
                    $("#selCity").append(option);
                }
            });
        });
        $("#selCity").change(function() {
            var selValue = $(this).val();
            $("#selDistrict option:gt(0)").remove();
            var selCity = $("#selCity option:selected").text();
            $(".selCity").text(selCity);
            $(".selDistrict").text("选择地区");
            $.each(countyJson, function(k, p) {
                if (p.parent == selValue) {
                    var option = "<option value='" + p.id + "'>" + p.county + "</option>";
                    $("#selDistrict").append(option);
                }
            });
        });
        $("#selDistrict").change(function() {
            var selDistrict = $("#selDistrict option:selected").text();
            $(".selDistrict").text(selDistrict);
        })
    });
</script>
</html>